<template>
  <div>
    <!-- {{currentStep}} -->
    <a-tree
      v-if="treeData.length"
      :tree-data="treeData"
      blockNode
      show-icon
      default-expand-all
      :replaceFields="replaceFields"
      :defaultSelectedKeys="defalutData.id && [defalutData.id]"
      @expand="onExpand"
      @select="treeClick"
    >
      <a-icon slot="switcherIcon" type="down" />
      <template slot="icon-head" slot-scope="item">
        <a-icon
          :type="item.isStep ? 'pushpin' : 'edit'"
          :theme="item.isStep ? 'outlined' : 'filled'"
        />
      </template>
      <template slot="orderCustom" slot-scope="item">
        <span :class="stepStyle(item.pos) ? 'step-title' : ''">
          <a-tooltip placement="top" :title="item.name">
            <span v-if="item.name.length > 20">{{
              item.name.substring(0, 19) + "..."
            }}</span>
          </a-tooltip>
          <span v-if="item.name.length <= 20">{{ item.name }}</span>
        </span>
        <span v-show="isCopShow(item)" style="float:right;color:green;">
          <a-icon type="check" />
        </span>
      </template>
      <template slot="custom" slot-scope="item">
        <span style="font-size:1.1em;">
          <span
            class="step-name"
            :class="stepStyle(item.pos) ? 'step-title' : ''"
          >
            <a-tooltip placement="top" :title="item.name">
              <span v-if="item.name.length > 20">{{
                item.name.substring(0, 19) + "..."
              }}</span>
            </a-tooltip>
            <span v-if="item.name.length <= 20">{{ item.name }}</span>
          </span>
          <span style="float:right;">
            <a-tooltip
              placement="top"
              :title="
                item.isStep ? '在下方添加同级步骤' : '在下方添加同级表单项'
              "
              style="margin-right:4px;"
            >
              <a-icon
                class="icon-right"
                @click.stop="insertDown(item.id, item.isStep)"
                type="plus"
              />
            </a-tooltip>
            <a-tooltip
              placement="top"
              title="复制至同级"
              style="margin-right:4px;"
            >
              <a-icon
                class="icon-right"
                type="copy"
                @click.stop="copyStep(item.id)"
              />
            </a-tooltip>
          </span>
        </span>
      </template>
    </a-tree>

    <AddStepDialog
      v-if="isDialogOpen"
      :openDialog.sync="isDialogOpen"
      :data="data"
      :title="data.isStep ? '新增步骤' : '新增表单项'"
      @confirmRefreshData="getAddStep"
    ></AddStepDialog>
    <InsertStepDialog
      v-if="insertDialogOpen"
      :openDialog.sync="insertDialogOpen"
      :data="data"
      :title="data.isStep ? '插入步骤' : '插入表单项'"
      @confirmRefreshData="getAddStep"
    ></InsertStepDialog>
  </div>
</template>

<script>
import api from "@/server/mouldConfig.js";
import AddStepDialog from "./components/addStepDialog.vue";
import InsertStepDialog from "./components/insertStepDialog.vue";

const replaceFields = { key: "id", title: "name" };

export default {
  name: "Tree",
  props: {
    treeData: {
      type: Array
    },
    defalutData: {
      type: Object
    }
  },
  model: {
    event: "getCurrentStep"
  },
  components: {
    AddStepDialog,
    InsertStepDialog
  },
  data() {
    return {
      expandedKeys: [],
      currentStep: {},
      isDialogOpen: false,
      replaceFields,
      isStep: true,
      insertDialogOpen: false,
      data: {
        id: 0,
        isStep: true,
        isJumpQueue: false
      }
    };
  },
  watch: {
    currentStep: {
      immediate: false,
      deep: true,
      handler: function(newVal) {
        this.$emit("getCurrentStep", newVal);
      }
    },
    defalutData(val) {
      this.currentStep = val;
      this.data.id = val.id;
    }
  },
  methods: {
    stepStyle(pos) {
      let arr = pos.split("-");
      if (arr.length < 3) {
        return true;
      }
      return false;
    },
    isCopShow(item) {
      let ass = false;
      let self = false;
      let spacia = false;
      if (
        item.assembly &&
        item.assembly.length &&
        typeof item.assembly[0].value == "string" &&
        item.assembly[0].value != ""
      ) {
        ass = true;
      }
      if (
        item.selfCheck &&
        item.selfCheck.length &&
        typeof item.selfCheck[0].value == "string" &&
        item.selfCheck[0].value != ""
      ) {
        self = true;
      }
      if (
        item.specialCheck &&
        item.specialCheck.length &&
        typeof item.specialCheck[0].value == "string" &&
        item.specialCheck[0].value != ""
      ) {
        spacia = true;
      }
      return ass && self && spacia;
    },
    treeClick(selectedKeys, data) {
      let row = {};
      if (selectedKeys && selectedKeys.length) {
        row = data.node.dataRef;
      }
      this.currentStep = row;
      this.data.id = row.id || 0;
      this.$emit("treeClick");
    },
    onExpand() {},
    addStep(key, isJumpQueue) {
      this.data.isJumpQueue = isJumpQueue;
      if (key == "step") {
        this.data.isStep = true;
      } else if (key == "formLabel") {
        this.data.isStep = false;
      }
      this.isDialogOpen = true;
    },
    getAddStep() {
      this.$emit("confirmRefreshData", this.currentStep);
    },
    insertDown(id, isStep) {
      this.data.id = id;
      this.data.isStep = isStep;
      this.insertDialogOpen = true;
    },
    async copyStep(id) {
      await api.stepCopy(id).then(res => {
        if (res.code == 200) {
          this.$message.success("复制成功");
        } else {
          this.$message.error("复制失败");
        }
      });
      this.$emit("confirmRefreshData");
    }
  },
  created() {},
  mounted() {}
};
</script>

<style lang="css" scoped>
.icon-right:hover {
  color: #1890ff;
}
.tree-text {
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-title {
  font-weight: bold;
}
.step-name {
  width: 50px;
  overflow: hidden;
}
</style>
